<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>首页</title>
    <link rel="stylesheet" href="css/goods_info.css">
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/foot.css">
    <link rel="stylesheet" href="css/yxMobileSlider.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<script>
    $(function() {
        $('.info_addflow').click(function(){
            $('.TestTan').fadeIn();
            $('.info_tanchu').removeClass('bounceOutDown').addClass('bounceInUp');
            $('.info_tanchu').show();
        })
        $('.tou').click(function(){
            $('.TestTan').fadeOut();
            $('.info_tanchu').removeClass('bounceInUp').addClass('bounceOutDown');
        })
    })

</script>

<body>
    <div class="top">
        <div class="top_left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"><img src="images/icon_back.png" alt=""></a></div>
        黑森林蛋糕
    </div>
    <div class="info_banner">
        <div class="slider">
            <ul>

                <a href="#">
                    <li><img src="images/img_topbanner.jpg" width="100%"></li>
                </a>
                <a href="#">
                    <li><img src="images/img_topbanner.jpg" width="100%"></li>
                </a>
                <a href="#">
                    <li><img src="images/img_topbanner.jpg" width="100%"></li>
                </a>

            </ul>
        </div>
        <script type="text/javascript" src="js/yxMobileSlider.js"></script>
        <script>
            $(".slider").yxMobileSlider({
                width: $(window).width(),
                height: $(window).width()/1.875,
                during: 3000
            })

        </script>
    </div>
    <div class="info_miaoxu">
        <div class="m_img">
            <img src="images/spmx_img_ttl.png" alt="">
        </div>
        <div class="m_txt">柔软的口感、甜蜜的味道，完美的巧克力蛋糕经得起各种口味的挑剔，表面富有曲线美的巧克力花纹与蛋糕的名称相得溢彩。油香浓郁、口感深香有回味，吃在口中香软诱人，自有一种独特风味，令人一品难忘。
        </div>
    </div>



    <div class="info_mingxi">
        <img src="images/spmx_ttl02.png" alt="">
        <img src="images/spmx_detail.png" alt="">
    </div>
    <style>
        .tou {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(10, 10, 10, 0.51);
        }
        
        .TestTan {
            height: 100%;
            width: 100%;
            position: fixed;
            display: none;
            z-index: 100;
        }
        .info_tanchu{
            display: none;
        }

    </style>
    <div class="TestTan">
        <div class="tou"></div>
        <div class="info_tanchu animated bounceInUp">
            <img class="img_g" src="images/spmx_hover_img01.png" alt="">
            <div class="info_tanchu_np">&nbsp;&nbsp;&nbsp;&nbsp;<span class="i_name">黑森林蛋糕</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="i_price">￥86.00~138.00</span></div>

            <div class="goods_size">
                <p>请选择合适的尺寸：</p>
                <div class="chicun">
                   <div class="spmx_img_select_off">4寸(合适2-3人)</div>
                   <div class="spmx_img_select_off">6寸(合适2-3人)</div>
                   <div class="spmx_img_select_off">8寸(合适2-3人)</div>
                   <div class="spmx_img_select_off">10寸(合适2-3人)</div>
                    <div class="spmx_img_select_off">8寸(合适2-3人)</div>
                   <div class="spmx_img_select_off">10寸(合适2-3人)</div>
                    <div class="spmx_img_select_off">8寸(合适2-3人)</div>
                   <div class="spmx_img_select_off">10寸(合适2-3人)</div>
                </div>
            </div>
            <div class="buynum">
                <div class="num_p">数量：</div>
                <div class="num_jj">
                    <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                    <input type="number" name="num" class="num_v" value="1">
                    <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                </div>
                <div class="buybut">
                    <div class="buybut1">加入购物车</div>
                    <a href="flow.html"><div class="buybut2">立即购买</div></a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(function() {
        $(".spmx_img_select_off").click(function() {
            $(".spmx_img_select_off").removeClass("spmx_img_select_on");
            $(this).addClass("spmx_img_select_on");
        });
    });
        
     $(".num_v").blur(function(){
        var num = $(".num_v").val();
            if(!$.isNumeric(num)){
                $(".num_v").val(1);
            }
     });   
        
    $(function() {
        $(".num_img1").click(function() {
            var num = Number($(".num_v").val());
            num =num - 1;
            if(num<=0){
               num = 1; 
            }
            $(".num_v").val(num);
        });
    });
    $(function() {
        $(".num_img2").click(function() {
            var num = Number($(".num_v").val());
            num =num + 1;
            $(".num_v").val(num);
        });
    });
        
    </script>

    <div class="foot" style="width: 70%;border:none;">
        <ul>
            <li>
                <div class="img"><a href="index.html"><img src="images/index_botmenu01off.png" alt=""></a></div>
            </li>
            <li>
                <div class="img"><a href="flow.html"><img src="images/index_botmenu02off.png" alt=""></a></div>
            </li>
            <li>
                <div class="img"><a href="user_order_list.html"><img src="images/index_botmenu03off.png" alt=""></a></div>
            </li>
        </ul>
    </div>
    <div class="info_addflow"> 
        加入购物车
    </div>
    
    <div style="clear: both;"></div>
</body>

</html>
